<template>
  <div class="menu-bar relative"
    @mouseenter="show = true"
    @mouseleave="show = false">
    <common-link :path="parentPath"
      class="menu-title text-md text-gray-1000 cursor-pointer leading-8 hover:text-purple-1300 flex items-center gap-x-1">
      <svg-icon class="mr-1 -mt-0.5 text-purple-1300 w-4 h-4"
        :isDiv="true"
        :iconName='icon'
        v-if="icon"></svg-icon>
      <span class="whitespace-nowrap">
        {{$t(title)}}
      </span>
      <svg class="h-5 w-5 flex-none text-gray-400"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true">
        <path fill-rule="evenodd"
          d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
          clip-rule="evenodd" />
      </svg>
    </common-link>

    <!-- <div class="sun-menu absolute top-8 py-5 z-10 bg-white rounded group-hover:block" -->
    <div class="sun-menu absolute -left-8 top-full z-10 pt-3 max-w-md rounded-3xl group-hover:block">
      <ul class="rounded-3xl bg-white p-4 overflow-hidden">
        <li v-for="(item,key) in menusList"
          :key="key">
          <common-link :path="item.path"
            class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50">
            <span class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white icon"
              v-if="item.icon">
              <svg-icon class="text-purple-1300"
                :iconName='item.icon'></svg-icon>
            </span>
            <div class="flex-auto">
              <div class="block font-semibold text-gray-900 whitespace-nowrap truncate"
                :class="{'text-purple-1300 font-semibold group-hover:opacity-90':item.activedMenu.includes($route.name)}">{{$t(item.title)}}</div>
              <p class="mt-1 text-gray-600 whitespace-nowrap truncate"
                v-if="item.desc">{{$t(item.desc)}}</p>
            </div>
          </common-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonMenuBar',
  props: {
    menusList: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: '',
    },
    parentPath: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
    isSpec: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      show: false,
    }
  },
}
</script>
<style lang='scss' scoped>
.menu-bar {
  .sun-menu {
    display: none;
    /* border: 1px solid #e3ebe9;
    left: 50%;
    transform: translateX(-50%); */
    ul {
      border-color: rgb(229, 231, 235);
      box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
        rgba(17, 24, 39, 0.05) 0px 0px 0px 1px,
        rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
        rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
      li {
        a {
          .icon {
            width: 24px;
            height: 24px;
            svg {
              font-size: 24px;
            }
          }
        }
      }
    }
  }
  &:hover {
    .sun-menu {
      display: block;
    }
  }
}
</style>